<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>增删改查</title>
<link href="../css/base.css" type="text/css" rel="stylesheet" />
<link href="../css/news.css" type="text/css" rel="stylesheet" />
</head>

<body background="images/background2.png">

        <div class="top">
        	<div class="logo"></div>
            <span></span>       
             <div class="txt01">
				<p>好看的皮囊千篇一律,有趣的灵魂万里挑一</p>
                <p>内修<b>素养</b> 外修<b>美颜</b></p>
            </div>
            <div class="tel">
                <p>全国服务咨询热线</p>
                <b>187****2920</b>
            </div>            
        </div> 
        <div class="nav">
        	<div class="nav_bg">
            	<ul>
                	<li class="ff"><a href="index.html">首页</a></li>
                    <li><span></span><a href="news.html">Chloe小老板</a></li>
                    <li><span></span><a href="product.html">产品中心</a></li>
                    <li><span></span><a href="companyIdea.html">会员登录/注册</a></li>
                    <li><span></span><a href="contactUs.html">购买</a></li>
					<li><span></span><a href="search.html">搜索</a></li>
                </ul>
                
            </div>
        </div>
       <i></i>
	</div>
    

 <script type="text/javascript">
       //通过新增按钮来控制表格的显示与隐藏
       var optionFlag = "save";
       var updateRowIndex = -1;
       var checkFlag=false;//默认为不显示
       function show() {
         optionFlag = "save";
         var f = document.getElementById("did");//获得id为did的 div
           if(!checkFlag) {
              f.style.visibility="visible";
           }else{
              f.style.visibility="hidden";
           }
           checkFlag=!checkFlag;
       }
      
       //通过保存按钮将数据添加到表格中
       function insertRow_() {
	   var number = document.getElementById("number");
	   if(number.value==""){
        alert("please input product name!");
        return false;
   	 }
         switch(optionFlag) {
            case "save" :
               insertRow_$save();
               break;
            case "update" :
               insertRow_$update();
               break;
            default :
               alert("操作失败！！"); 
         }
        
         function insertRow_$save() {
            //通过id获得要添加数据的表格
          var table = document.getElementById("tableid");
         
          //将所输入的内容赋给定义的变量
          var numberName = document.getElementById("number").value;
          var titleName = document.getElementById("title").value;
          var typeName = document.getElementById("type").value;
          //获取下拉框内的内容
          var selectIndex_ = document.getElementById("select");
          var option = selectIndex_.options[selectIndex_.selectedIndex];
          var selectName = option.text;
		  
          
          //获取编号的内容
          var numberid = table.rows.length;
         
          //在表尾添加一行数据
          var row_ = table.insertRow(table.rows.length);
 
          row_.insertCell(0).innerHTML = numberid;
          row_.insertCell(1).innerHTML = numberName;
          row_.insertCell(2).innerHTML = titleName;
		  row_.insertCell(3).innerHTML = typeName;
		  row_.insertCell(4).innerHTML = selectName;
          
         
          row_.insertCell(5).innerHTML = '<input type="button" value="修改" onclick="update_(this.parentNode.parentNode)"></input>&nbsp;<input type="button" value="删除" onclick="delete_(this.parentNode.parentNode)"></input>';
         
          document.getElementById("number").value = "";
          document.getElementById("title").value = "";
          document.getElementById("type").value = "";
          document.getElementById("select").options[0].selected="true";
         
          var f = document.getElementById("did");
          f.style.visibility="hidden";
         
          alert("增加数据成功！！");
         }
         //修改后的保存
         var tr;
         function insertRow_$update() {
             var table = document.getElementById("tableid");
             tr = table.rows[updateRowIndex];
            
             var p = document.getElementById("number");
             tr.cells[1].innerHTML = p.value;
            
             p = document.getElementById("title");
             tr.cells[2].innerHTML = p.value;
            
             p = document.getElementById("type");
             tr.cells[3].innerHTML = p.value;
            
             p = document.getElementById("select");
             var Index_ = p.selectedIndex;
             var option = p.options[Index_];
             var selectName = option.text;
             tr.cells[4].innerHTML = selectName;
			 
			 
            
             document.getElementById("number").value = "";
             document.getElementById("title").value = "";
			 document.getElementById("type").value = "";
             document.getElementById("select").options[0].selected="true";
            
		  
		  
             var f = document.getElementById("did");
             f.style.visibility="hidden";
            
             alert("修改数据成功！！");
         }
       }
      
       //通过删除按钮  删除当前所在行
       function delete_(row_) {
         var table = document.getElementById("tableid");
         table.deleteRow(row_.rowIndex);
        if(confirm("你确定要删除吗？")){
	}
         refurbish_();
         alert("删除数据成功！！");
       }
      
       //刷新
       function refurbish_() {
         var table = document.getElementById("tableid");
         //获得table的行数
         var rows = table.rows;
         for(var i=1;i<rows.length;i++) {
           rows[i].cells[0].innerHTML = i;
         }
       }
      
       //通修改按钮对table里的数据进行修改
       function update_(row) {
         updateRowIndex = row.rowIndex;
         optionFlag = "update";
         //对table里的数据进行回显
         document.getElementById("number").value = row.cells[1].innerHTML;
         document.getElementById("title").value = row.cells[2].innerHTML;
		 document.getElementById("type").value = row.cells[3].innerHTML;
		 var selectText = row.cells[4].innerHTML;
         var sel = document.getElementById("select");
         var ops = sel.options;
         for(var i=0;i<ops.length;i++) {
            if(selectText==ops[i].text) {
               sel.options[i].selected = "true"; 
            }
         }
         var f = document.getElementById("did");
         f.style.visibility="visible";
       }
        
         
    </script>
  </head>
 

    <input type="button" value="新增" onclick="show()"></input>
    <div>
      <table border = "1" cellspacing = "0" id="tableid"  width="90%">
         <tr>
		 	<th style="width:20%;">序号</th>
    		<th style="width:20%;">产品名</th>
			<th style="width:20%;">类别</th>
			<th style="width:20%;">网页</th>
			<th style="width:20%;">商品类型</th>
         </tr>
         <tr>
		 	<td>1</td>
            <td>HTML/CSS/Javascript</td>
			<td>学习</td>
			<td><a href="index.html">点我返回主页</span></a></td>
    		<td>book</td>
            <td>
               <input type="button" value="修改" onclick="update_(this.parentNode.parentNode)"></input>
               <input type="button" value="删除" onclick="delete_(this.parentNode.parentNode)"></input>
            </td>
         </tr>
     </table>
    </div>
 <br>
    <div align="center" id="did" style="visibility:hidden">
       <form action="">
         <table>
          <tr>
      <td>产品名：</td>
      
	  <td><input type="text" name="number" id="number" /><font color="red"> *</font></td>
      <td>类别：</td>
      <td><input type="text" id="title"></input></td>
    </tr>
  
    <tr>
	  <td>类型：</td>
      <td><input type="text" id="type"></input></td>
      <td>商品类型：</td>
      <td align="left">
       <select id="select">
          <option>book</option>
          <option>makeup</option>
          <option>protect</option>
       </select>
	   
      </td>
    </tr>
   </table>
   <br>  
      <center>
         <input type="button" value="保存" onclick="insertRow_()"></input>
         <input type="reset" value="重置"></input>
      </center>
      </form>
   </div>
 </body>

    <div class="bottom">
    	<div class="bb">
               <ul>
                	<li class="ff"><a href="index.html">首页</a></li>
                    <li><span></span><a href="news.html">Chloe小老板</a></li>
                    <li><span></span><a href="product.html">产品中心</a></li>
                    <li><span></span><a href="companyIdea.html">会员登录/注册</a></li>
                    <li><span></span><a href="contactUs.html">购买</a></li>
				
                </ul>
        </div>
       	<center>
		<font face="楷体" size="5" color="#CCCCCC">
			<b>copyright:&copy;chloe</b><br/>
		</font>
		</center>
    </div>
</body>
<script src="../js/jquery.js"></script>
<script src="../js/news.js"></script>
</html>
